<template>
  <ul :class='classList'>
    <li v-for="item in getData">
      <router-link :to="item.url">
        <img :src="item.img" alt="">
        <p><span class="radio line-left"></span><span class="label">{{item.label}}</span><span class="radio line-right"></span></p>
      </router-link>
    </li>
  </ul>
</template>
<script>
export default {
  props:["data","className"],
  components: {},
  name: "",
  data() {
    return {
      defaultData:[
        {
          img:require('../../assets/img/hpmepage/7.png'),
          label:"车况报告",
          url:"/condition",
        },{
          img:require('../../assets/img/hpmepage/8.png'),
          label:"三人行",
          url:"/regiment",
        }
      ],

      classList:{
        'feature':true,
        'box-size':true
      }
    };
  },
  computed:{
    getData(){
      for(var key in this.className){
        this.classList[key]=this.className[key]
      }

      return this.data||this.defaultData
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.feature {
  margin:  0 15px;
  display: flex;
  padding-bottom: 10px;
  justify-content: space-between;

  li{
    width: calc(50% - 7.5px);
    box-shadow:0px 0px 10px 2px rgba(243, 149, 25, 0.15);

    a{
      color: #666;
    }
    img{
      width: 100%;
      // height: 100px;
    }
    p{
      text-align: center;
      position: relative;

      span.label{
        display: inline-block;
        height: 38px;
        padding: 0 5px;
        font-size: 14px;
        box-sizing: border-box;
        line-height: 38px;
      }
      span.radio{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #FA9627;
        line-height: 38px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span.line-left,span.line-right{
        position: relative;
      }
      span.line-left::before{
        content: "";
        height: 0px;
        width: 30px;
        left: -35px;
        border-top: 1px solid #FA9627;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span.line-right::after{
        content: "";
        height: 0;
        width: 30px;
        right: -35px;
        border-top: 1px solid #FA9627;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>